/**
 * Base styles
 */

.happychat__container {
	overflow: hidden;
	position: fixed;
	bottom: 0;
	right: 12px;
	font-size: $font-body-small;
	display: none;		/* disabled */
	box-sizing: border-box;

	transform: translateZ( 0 );
	backface-visibility: hidden;

	.happychat__title {
		cursor: default;
		padding: 0;
		background: var( --color-surface );
		color: var( --color-neutral-dark );
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		line-height: 32px;
	}

	.happychat__active-toolbar > div {
		padding: 4px 11px;
	}

	&.is-open {
		display: block;
		background: var( --color-neutral-0 );
		bottom: 0;
		z-index: z-index( 'root', '.happychat__container.is-open' );
	}

}

// experiment: style scrollbars
.happychat, .happychat__page {

	::-webkit-scrollbar {
		width: 12px;
		height: 12px;
	}

	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background-color: var( --color-neutral-20 );
		border: 3px solid transparent;
		background-clip: padding-box;

		&:hover {
			background-color: var( --color-neutral-light );
		}

	}

}


/**
 * Minimize animation
 */

.layout .happychat .happychat__container.is-open.is-minimizing {
	animation: happychat-minimize 0.5s 1 forwards;

	> .happychat__composer,
	> .happychat__welcome,
	> .happychat__conversation,
	> .happychat__title .happychat__active-toolbar * {
		visibility: hidden;
	}

	> .happychat__title {
		transform: translateZ( 0 );
		position: relative;
		animation: happychat-disappear 0.1s 1 forwards;
	}

}

@keyframes happychat-disappear {
	0% {
		top: 0;
	}
	50% {
		top: 4px;
	}
	100% {
		top: -47px;
	}
}

@keyframes happychat-minimize {
	0% {
		max-height: 220px;
	}
	50% {
		opacity: 1;
	}
	99%, 100% {
		right: 25px;
		width: 34px;
		max-height: 34px;
		bottom: 90px;
		opacity: 0;
	}
	100% {
		max-height: 0;
	}
}

@include breakpoint-deprecated( '>960px' ) {
	@keyframes happychat-minimize {
		0% {
			max-height: 100%;
		}
		50% {
			opacity: 1;
		}
		99%, 100% {
			right: 25px;
			width: 34px;
			max-height: 34px;
			bottom: 90px;
			opacity: 0;
		}
		100% {
			max-height: 0;
		}
	}
}

/**
 * Panel mode
 */

@include breakpoint-deprecated( '>480px' ) {

	.layout:not( .is-section-happychat ) {
		.happychat__container.is-open {
			box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 ), 0 1px 10px rgba( 0, 0, 0, 0.1 );
			width: 280px;
		}

		.happychat__message {
			height: auto;
		}

		.happychat__message > textarea {
			padding: 12px;
		}

		.happychat__conversation,
		.happychat__welcome {
			min-height: 160px;
			max-height: 220px;
		}
	}

}

@include breakpoint-deprecated( '<480px' ) {

	.layout:not( .is-section-happychat ) {
		.happychat__container.is-open {
			right: 0;
		}

		.happychat__conversation,
		.happychat__welcome {
			min-height: 160px;
			max-height: 220px;
		}
	}

}


/**
 * Sidebar mode
 */

@include breakpoint-deprecated( '>1040px' ) {

	// be more specific in scope to override the panel mode
	.layout.has-chat:not( .is-group-editor ):not( .is-section-theme ):not( .is-group-reader ):not( .has-no-sidebar ) .happychat__container.is-open {
		position: fixed;
		height: calc( 100% - 47px );
		bottom: 0;
		right: 0;
		width: 272px;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		box-shadow: none;

		.happychat__conversation,
		.happychat__composer,
		.happychat__welcome,
		.happychat__active-toolbar {
			border-left: 1px solid var( --color-neutral-10 );
		}

		.happychat__title {
			line-height: 46px;
		}

		.happychat__active-toolbar > div {
			padding: 11px;
		}

		.happychat__message {
			height: auto;
		}

		.happychat__message > textarea {
			padding: 12px 12px 32px;
		}

		.happychat__conversation,
		.happychat__welcome {
			min-height: 160px;
			max-height: none;
		}

	}


	// add space in the main column for the docked sidebar
	.layout.has-chat:not( .is-group-editor ):not( .is-section-theme ):not( .is-group-reader ):not( .has-no-sidebar ) .layout__content {
		padding: 79px 304px 32px;
	}

	// adjust when scoll arrows show up in stats insights when panel is open
	.has-chat.is-section-stats .post-trends__scroll-left,
	.has-chat.is-section-stats .post-trends__scroll-right {
			display: block;
	}

	// make space in customizer
	.has-chat .main.customize.is-iframe {
		right: 272px;
	}

}
